<template>
  <!-- TreeSelect做侧边栏 -->
  <van-tree-select height="auto" :items="items" :main-active-index.sync="active">
    <template #content>
      <!-- 切换展示图片 -->
      <van-image v-if="active === 0" src="https://pic2.zhimg.com/80/v2-4a7b2102400e4201eedd17f9cd134c69_720w.webp" />
      <van-image v-if="active === 1" src="https://pic3.zhimg.com/80/v2-4a5396e57fa8272aa819d2468d2b4c16_720w.webp" />
      <van-image v-if="active === 2" src="https://pic3.zhimg.com/80/v2-e77b66cb6a0d59b0309d9029a771827a_720w.webp" />
      <van-image v-if="active === 3" src="https://pic3.zhimg.com/80/v2-2db2e097d052c9df12c46c01b925f212_720w.webp" />
      <van-image v-if="active === 4" src="https://pic3.zhimg.com/80/v2-c11e4550787f6f6e97bfd4d1f3b907b6_720w.webp" />
      <van-image v-if="active === 5" src="https://pic4.zhimg.com/80/v2-f3ec79e311024eb6b9609793cbfcf06f_720w.webp" />
      <van-image v-if="active === 6" src="https://pic4.zhimg.com/80/v2-77a1603ae4b17f9942f5661dc0e9e687_720w.webp" />
      <van-image v-if="active === 7" src="https://pic2.zhimg.com/80/v2-bb0240c52d29e42e28bcc4f49fc49e91_720w.webp" />
      <!-- 切换介绍文字 -->
      <p v-if="active === 0">{{ wentan }}</p>
      <p v-if="active === 1">{{ fantan }}</p>
      <p v-if="active === 2">{{ biantan }}</p>
      <p v-if="active === 3">{{ shizi }}</p>
      <p v-if="active === 4">{{ wuge }}</p>
      <p v-if="active === 5">{{ duantan }}</p>
      <p v-if="active === 6">{{ duntan }}</p>
      <p v-if="active === 7">{{ huantan }}</p>
    </template>
  </van-tree-select>
</template>

<script>
import { mapState } from 'vuex';
export default {
  // 标签
  data() {
    return {
      active: 0,
      items: [{ text: '文镡' }, { text: '反镡' }, { text: '扁镡' }, { text: '十字' }, { text: '无格' }, { text: '短镡' }
        , { text: '盾镡' }, { text: '环镡' }],
    };
  },
  // 用vuex导入介绍文字
  computed: {
    ...mapState(['wentan', 'fantan', 'biantan', 'shizi', 'wuge', 'duantan', 'duntan', 'huantan'])
  }
};

</script>